<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const userId = ref('1')

const navigateToUser = () => {
    console.log('userId',userId.value,`/users/${userId.value}`)
  router.push(`/users/${userId.value}`)
}

const navigateWithParams = () => {
  router.push({
    name: 'user',
    params: { id: userId.value }
  })
}

const navigateWithQuery = () => {
  router.push({
    path: '/users/'+userId.value,
    query: { tab: 'profile' }
  })
}
</script>

<template>
  <div class="router-demo">
    <h2>路由示例</h2>

    <section>
      <h3>1. 声明式导航</h3>
      <div class="nav-links">
        <router-link to="/">首页</router-link> |
        <router-link to="/about">关于</router-link> |
        <router-link :to="{ name: 'user', params: { id: 1 }}">用户1</router-link>
      </div>
    </section>

    <section>
      <h3>2. 编程式导航</h3>
      <div class="nav-buttons">
        <input v-model="userId" placeholder="输入用户ID">
        <button @click="navigateToUser">访问用户页面</button>
        <button @click="navigateWithParams">使用命名路由</button>
        <button @click="navigateWithQuery">带查询参数</button>
      </div>
    </section>

    <section>
      <h3>3. 路由出口</h3>
      <div class="router-view-demo">
        <router-view></router-view>
      </div>
    </section>
  </div>
</template>

<style scoped>
.router-demo {
  padding: 20px;
}

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.nav-links {
  margin: 10px 0;
}

.nav-links a {
  margin: 0 10px;
  color: #2c3e50;
  text-decoration: none;
}

.nav-links a.router-link-active {
  color: #42b983;
}

.nav-buttons {
  margin: 10px 0;
}

.nav-buttons button {
  margin: 0 10px;
  padding: 5px 15px;
}

input {
  padding: 5px;
  margin-right: 10px;
}

.router-view-demo {
  margin-top: 20px;
  padding: 15px;
  border: 1px dashed #ddd;
  border-radius: 8px;
}
</style> 